<%@ include file="/WEB-INF/views/includes/include.jsp" %>

<div id="stattabs">
    <ul>
        <li>
            <a href="#indirankstat">Individual Ranks</a>
        </li>
        <li>
            <a href="#countryrankstat">Country Ranking</a>
        </li>
        <li>
            <a href="#globalstat">Global Dominators</a>
        </li>
    </ul>
    <div id="tabs-1" class="minstat">
        <div id="indirankstat">
            Loading...
        </div>
    </div>
    <div id="tabs-2" class="minstat">
        <div id="countryrankstat">
            Loading...
        </div>
    </div>
    <div id="tabs-3" class="minstat">
        <div id="globalstat">
            Loading...
        </div>
    </div>
</div>
<script language="javascript">
     $('#stattabs').tabs();
	
    function chartInited(){
        isMotionChartLoaded = true;
    }
    
    var isMotionChartLoaded = true;
    
    function drawStatMap(){
           var statData = new google.visualization.DataTable();
        statData.addRows(6);
        statData.addColumn('string', 'Country');
        statData.addColumn('number', 'Popularity');
        statData.setValue(0, 0, 'Germany');
        statData.setValue(0, 1, 600);
        statData.setValue(1, 0, 'United States');
        statData.setValue(1, 1, 800);
        statData.setValue(2, 0, 'Brazil');
        statData.setValue(2, 1, 900);
        statData.setValue(3, 0, 'Canada');
        statData.setValue(3, 1, 500);
        statData.setValue(4, 0, 'France');
        statData.setValue(4, 1, 600);
        statData.setValue(5, 0, 'RU');
        statData.setValue(5, 1, 900);
        var containerg = document.getElementById('globalstat');
        var geomapg = new google.visualization.GeoMap(containerg);
        geomapg.draw(statData, options);
        
        statData = new google.visualization.DataTable();
        statData.addRows(6);
        statData.addColumn('string', 'Country');
        statData.addColumn('date', 'Date');
        statData.addColumn('number', 'Dollars');
        
        
        statData.setValue(0, 0, 'India');
        statData.setValue(0, 1, new Date(1988, 0, 1));
        statData.setValue(0, 2, 1000);
        
        
        statData.setValue(1, 0, 'US');
        statData.setValue(1, 1, new Date(1988, 0, 1));
        statData.setValue(1, 2, 950);
        
        
        statData.setValue(2, 0, 'China');
        statData.setValue(2, 1, new Date(1988, 0, 1));
        statData.setValue(2, 2, 300);
        
        
        statData.setValue(3, 0, 'India');
        statData.setValue(3, 1, new Date(1988, 1, 1));
        statData.setValue(3, 2, 1200);
        
        
        statData.setValue(4, 0, 'China');
        statData.setValue(4, 1, new Date(1988, 1, 1));
        statData.setValue(4, 2, 900);
        
        
        statData.setValue(5, 0, 'US');
        statData.setValue(5, 1, new Date(1988, 1, 1));
        statData.setValue(5, 2, 788);
        
        
        
        var motionchart = new google.visualization.MotionChart(document.getElementById('countryrankstat'));
        
        var options = {};
        options['state'] = '{"iconType":"BUBBLE","yZoomedDataMax":1200,"orderedByY":false,"duration":{"multiplier":1,"timeUnit":"D"},"showTrails":true,"xLambda":1,"iconKeySettings":[],"time":"1988","nonSelectedAlpha":0.4,"colorOption":"2","yZoomedDataMin":300,"playDuration":15000,"orderedByX":false,"xZoomedIn":false,"uniColorForNonSelected":false,"dimensions":{"iconDimensions":["dim0"]},"yZoomedIn":false,"xZoomedDataMin":300,"xAxisOption":"2","xZoomedDataMax":1200,"yLambda":1,"yAxisOption":"2","sizeOption":"2"}'
        options['width'] = 600;
        options['height'] = 400;
        options['showSidePanel'] = true;
        options['showXMetricPicker'] = false;
        options['showYMetricPicker'] = false;
        options['showAdvancedPanel'] = false;
        motionchart.draw(statData, options);
    }
    
    
    
    

    drawStatMap();
</script>
